* {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: #400a08;

  .top {
    background-color: #c10100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .slogan {
      font-size: 4vw;
      font-weight: bolder;
      color: white;
      margin-left: 5vw;
    }
    .city {
      display: flex;
      align-items: center;
      .city_chengdu {
        background-color: #e76c6f;
        font-size: 16px;
        line-height: 20px;
        padding: 2px 8px;
        margin-right: 10px;
      }
      > span {
        font-size: 12px;
        color: white;
      }
      .cube {
        width: 8px;
        height: 8px;
        background-color: #e66470;
      }
    }

    .index {
      width: 20vw;
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
      .index_box {
        width: 20vw;
        height: 26px;
        display: flex;
        justify-content: space-between;
        > input {
          width: 70%;
          height: 100%;
          font-size: 12px;
          line-height: 26px;
          text-indent: 1em;
        }
        > .index_btn {
          width: 25%;
          height: 100%;
          font-size: 16px;
          font-weight: bold;
          color: black;
          border: 1px solid gray;
          background-color: #fafafa;
          box-shadow: inset 0px -13px 5px rgba(gray, 0.3);
          text-align: center;
        }
      }
      > div {
        font-size: 12px;
        color: white;
        margin-top: 4%px;
      }
    }
    // .login-setting {
    //   width: 100%;
    // }
    .login {
      height: 4vw;
      color: white;
      font-size: 16px;
      text-align: start;
      margin-right: 2vw;
    }
  }

  // --------------------------
  .content {
    // border: 5px solid #78b6e2;
    width: 100vw;
    // height: 100vh;
    background-color: #fad7b9;
    margin-top: 5vh;
    display: flex;
    justify-content: space-evenly;
    // overflow: hidden;
    > .left {
      width: 20vw;
      > .left1 {
        width: 20vw;
        height: 20vw;
        background-color: #ffffff;
        border: 2px solid #e2a878;
        border-radius: 14px;
        .invisibleBox {
          width: 90%;
          height: 90%;
          display: flex;
          flex-wrap: wrap;
          align-items: flex-start;
          align-content: space-between;
          margin: auto;
          > .act_title {
            width: 100%;
            color: #655f63;
            font-size: 16px;
            font-weight: bold;
            line-height: 40px;
            border: 0px;
            border-bottom: 1px dashed #ff5b0d;
          }
          // left1
          > p {
            width: 100%;
            font-size: 12px;
            color: #655f63;
          }
          > .geiwoso,
          .dianjitijiao {
            width: 110px;
            height: 32px;
            background-color: #d5a622;
            border-radius: 4px;
            box-shadow: inset -2px -2px 5px #9f7b09, inset 2px 2px 5px #9f7b09;
            color: white;
            font-size: 18px;
            line-height: 32px;
            text-align: center;
            margin: auto;
          }
          // left2
          > .advice {
            width: 90%;
            height: 40%;
            border: 1px solid black;
            margin: auto;
          }
          > .dianjitijiao {
            background-color: #ed5442;
            box-shadow: unset;
          }
          // left3
        }
      }
    }

    > .right {
      width: 65vw;

      border: 2px solid #fb8470;
      background-color: #ffffff;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;

      // padding-bottom: 30vh;
      .right_row {
        width: 70%;
        // height: 20%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        border-bottom: 2px dashed rgb(144, 62, 62);
        margin: 5vh auto;
        .rank {
          width: 20px;
          height: 20px;

          font-size: 14px;
          color: white;
          background-color: #e2a878;
          border-radius: 5px;
          text-align: center;
          line-height: 20px;
        }
        .imgbox {
          width: 70px;
          height: 50px;
          border: 2px solid rgb(163, 163, 40);
        }
        .scrib {
          width: 200px;
          display: flex;
          flex-wrap: wrap;
          align-items: flex-start;
          p {
            width: 100%;
          }
        }
      }
    } //right
  } // content
}

@media screen and (max-width: 1280px) {
  body {
    .content {
      height: 100vh;
      margin-top: 4px;
      flex-wrap: wrap;
      // overflow: hidden;
      // padding-bottom: 30vh;
      .left {
        width: 100%;
        display: flex;
        justify-content: center;
        margin: 20px;
      }
      .right {
        // overflow: hidden;
        .right_row {
          margin: 30px;
        }
      }
    }
  }
}
@media screen and (max-width: 1028px) {
  body {
    .content {
      margin-top: 3px;
      flex-wrap: wrap;
    }
  }
}
@media screen and (max-width: 768px) {
  body {
    .content {
      height: 100vh;
      flex-wrap: wrap;
      justify-content: center;
      align-content: flex-start;
    }
  }
}
